/*
 * @Author: quit
 * @Date: 2023-02-28 06:05:31
 * @LastEditTime: 2023-02-28 06:45:14
 * @Descripttion:
 * 在组件通讯中3中常见的通讯
 * 1.父级组件与子级组件
 * 2.子级组件与父级组件
 * 3.同级组件之间的通讯
 * @notice:
 */

/**
 * 父组件给子组件标签添加属性,值为state中的数据
 * 子组件通过props获取父组件传递的值
 */
class Parent extends React.Component {
    state = {
        lastName: '王'
    }
    render() {
        return (
            <div>
                <div> 将值传递给子组件 </div>
                <Child name={this.state.name} />
            </div>
        )
    }
}

function Child(props) {
    return (
        <div>
            <div>子组件获取的数据:{props.name}</div>
        </div>
    )
}

/**
 * 子组件传递值给父组件
 * 利用回调函数,父组件创建一个回调函数,子组件调用,将需要传递的值作为回调函数的参数进行传递
 */
class Parent extends React.Component {
    getChildMsg = msg => {
        console.log('来源于子组件的数据:', msg)
    }

    render() {
        return (
            <div>
                <div></div>
                <Child sendMsg={this.getChildMsg} />
            </div>
        )
    }
}

class Child extends React.Component {
    state = {
        msg: 'React communication'
    }

    toParentMsg = () => {
        this.props.sendMsg(this.state.msg)
    }

    render() {
        return (
            <div>
                <button onClick={this.toParentMsg}> 按钮 </button>
            </div>
        )
    }
}

/**
 * 同级组件的通讯需要将这两个组件放置在一个公用的父级组件中,由这个父级组件进行管理
 * 这个父组件需要提供一个共享状态以及共享状态的方法
 */
class Parent extends React.Component {
    state = {
        share: ''
    }

    updateShareMsg = msg => {
        this.setState({
            share: msg
        })
    }

    render() {
        return (
            <div>
                <Child1 shareData={this.state.share} updateShare={this.updateShareMsg} />
                <Child2 shareData={this.state.share} updateShare={this.updateShareMsg} />
            </div>
        )
    }
}

class Child1 extends React.Component {
    state = {
        msg: 'Hello Im child1'
    }

    sendMsg = () => {
        this.props.updateShare(this.state.msg)
    }

    render() {
        return (
            <div>
                <div> 来源同级组件的数据:{this.props.shareData} </div>
                <button onClick={this.sendMsg}></button>
            </div>
        )
    }
}

class Child2 extends React.Component {
    state = {
        msg: 'Hello Im child2'
    }

    sendMsg = () => {
        this.props.updateShare(this.state.msg)
    }

    render() {
        return (
            <div>
                <div> 来源同级组件的数据:{this.props.shareData} </div>
                <button onClick={this.sendMsg}></button>
            </div>
        )
    }
}
